<template>
	<view class="poster" >
		<image :src="posterImg" v-if="posterImageStatus" class="posterUrl" mode=""></image>
		<canvas class="canvas" canvas-id="myCanvas" v-if="canvasStatus"></canvas>
		<view class="bottoms flex-between-center" v-if="posterImageStatus" >
			<!--#ifdef MP-->
			<button class="flex-aj-center" open-type="share">分享至微信好友</button>
			<!--#endif-->
			<view class="flex-aj-center" @click="savePosterPath" >保存海报至相册</view>
		</view>
	</view>
</template>

<script>
	import {
		getCode,
		getUserInfo
	} from "@/api/user.js"
	import { mapGetters } from "vuex";
	export default {
		data() {
			return {
				posterImg: '',
				posterBg: 'https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/70331714095102876.png',
				posterImageStatus: false,
				canvasStatus: false,
				userInfo:{}
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		computed: {
			...mapGetters(['isLogin', 'uid']),
		},
		onShareAppMessage() {
			const share = {
				title: '用户'+this.userInfo.phone.slice(-4)+'邀请您',
				imageUrl: 'https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/12611714097060906.png',
				path: '/pages/index/index'
			};
			return share;
		},
		methods: {
			getUserInfo(){
				getUserInfo().then(res=>{
					this.userInfo = res.data
					this.goPoster()
				})
			},
			posterImageClose(){
				// this.posterImageStatus = false
			},
			savePosterPath: function() {
				let that = this;
				// #ifdef MP
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									uni.saveImageToPhotosAlbum({
										filePath: that.posterImg,
										success: function(res) {
											that.posterImageClose();
											that.$util.Tips({
												title: '保存成功',
												icon: 'success'
											});
										},
										fail: function(res) {
											that.$util.Tips({
												title: '保存失败'
											});
										}
									})
								}
							})
						} else {
							uni.saveImageToPhotosAlbum({
								filePath: that.posterImg,
								success: function(res) {
									that.posterImageClose();
									that.$util.Tips({
										title: '保存成功',
										icon: 'success'
									});
								},
								fail: function(res) {
									that.$util.Tips({
										title: '保存失败'
									});
								},
							})
						}
					}
				})
				// #endif
				// #ifdef APP-PLUS || H5
				uni.saveImageToPhotosAlbum({
					filePath: that.posterImage,
					success: function(res) {
						that.posterImageClose();
						that.$util.Tips({
							title: '保存成功',
							icon: 'success'
						});
					},
					fail: function(res) {
						that.$util.Tips({
							title: '保存失败'
						});
					},
				})
				// #endif
			},
			getImage(imgPath) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: imgPath,
						success(res) {
							resolve(res.path); // 将图像路径作为Promise的解析值进行返回
						},
						fail(err) {
							reject(err); // 如果出现错误，则将错误信息作为Promise的拒绝原因返回
						}
					});
				});
			},
			async goPoster() {
				let that = this;
				try {
					this.$set(this, 'canvasStatus', true); // 设置 canvasStatus 为 true

					// 调用 getImage() 函数获取图像，等待图像获取完成
					const image = await this.getImage(
						'https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/4251714095191936.png');
					const avatar = await this.getImage(
						'https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/10891714096780567.png');
					const qrCode = await this.getImage(this.userInfo.hhrQrcode.qrcodeUrl);
					// 创建包含海报背景和获取到的图像的数组
					const arr = [this.posterBg, image, avatar,qrCode];
					that.$nextTick(function() {
						that.$util.PosterCanvas2(arr,that.userInfo.name?that.userInfo.name:'用户',
							function(tempFilePath) {
								that.$set(that, 'posterImg', tempFilePath);
								that.$set(that, 'posterImageStatus', true);
								that.$set(that, 'canvasStatus', false);
								// that.$set(that, 'actionSheetHidden', !that
								// 	.actionSheetHidden);
							});
					})
					// 打印数组到控制台
					console.log(arr);
				} catch (error) {
					// 捕获并处理可能发生的错误
					console.error('Error in goPoster:', error);
				}

				return;
				uni.getImageInfo({
					src: that.posterBg,
					fail: function(res) {
						// #ifdef MP
						return that.$util.Tips({
							title: '小程序二维码需要发布正式版后才能获取到'
						});
						// #endif
					},
					success(res) {
						console.log(res)


						if (!that.posterImg) {
							that.$nextTick(function() {
								that.$util.PosterCanvas2(arr, '张欣蕊',
									function(tempFilePath) {
										that.$set(that, 'posterImg', tempFilePath);
										that.$set(that, 'posterImageStatus', true);
										that.$set(that, 'canvasStatus', false);
										// that.$set(that, 'actionSheetHidden', !that
										// 	.actionSheetHidden);
									});
							})
							//海报二维码不存在则从新下载
							// that.downloadFilePromotionCode(function(msgPromotionCode) {
							// 	arr2[2] = msgPromotionCode;
							// 	if (arr2[2] == '')
							// 		return that.$util.Tips({
							// 			title: '海报二维码生成失败！'
							// 		});
							// 	that.$nextTick(function() {
							// 		that.$util.PosterCanvas2(arr2, that.posterInfo.title, that
							// 			.posterInfo
							// 			.price, that.posterInfo.msg,
							// 			function(tempFilePath) {
							// 				that.$set(that, 'posterImage', tempFilePath);
							// 				that.$set(that, 'posterImageStatus', true);
							// 				that.$set(that, 'canvasStatus', false);
							// 				// that.$set(that, 'actionSheetHidden', !that
							// 				// 	.actionSheetHidden);
							// 			});
							// 	})
							// });
						} else {
							//生成推广海报+
							that.$nextTick(function() {
								that.$util.PosterCanvas2(arr, '张欣蕊',
									function(tempFilePath) {
										that.$set(that, 'posterImg', tempFilePath);
										that.$set(that, 'posterImageStatus', true);
										that.$set(that, 'canvasStatus', false);
									});
							})
						}
					}
				});
			},
		}
	}
</script>

<style>
	page {
		background-color: #F5F7FA;
	}
</style>
<style lang="scss" scoped>
	.canvas {
		visibility: hidden;
		width: 702px;
		height: 1128px;
		float: right;
		z-index: -1;
		opacity: 0;
		position: relative;
		bottom: -2000rpx;
	}

	.poster {
		padding: 48rpx 24rpx;

		.posterUrl {
			width: 100%;
			height: 1128rpx;
			margin-bottom: 48rpx;
		}

		.bottoms {
			width: 100%;

			button,
			view {
				width: 100%;
				height: 96rpx;
				background: linear-gradient(90deg, #FFA947 0%, #FF8533 100%);
				border-radius: 48rpx;
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 32rpx;
				text-align: center;
				font-style: normal;
			}

			view {
				background: linear-gradient(90deg, #FF6C47 0%, #FF3341 100%);
				margin-left: 22rpx;
			}
		}
	}
</style>